import React from 'react'
import styled from 'styled-components';
import RouterView from '../../router/index'
import LeftUrl from '../../components/leftUrl'
import HeaderCom from '../../components/header'

const HomeIndex = (props) => {
  return (
    <HomeWrapper>
      <HeaderDiv>
        <HeaderCom {...props} />
      </HeaderDiv>
      <MainBody>
        <div className="left">
          <LeftUrl />
        </div>
        <div className="right">
          <RouterView routes={props.routes}></RouterView>
        </div>
      </MainBody>
    </HomeWrapper>
  )
}

export default HomeIndex;



const HomeWrapper = styled.div`
  width: calc(100vw - 50px);
  height: 600px;
  background: #eee;
  margin:0 auto;
`;

const HeaderDiv = styled.header`
  width: 100%;
  height: 90px;
  background: skyblue;
`;

const MainBody = styled.div`
   display:flex;
   height: calc(100% - 90px);
  .left {
    flex:3;
    height: 100%;
    border-right: 1px solid #ccc;
  } 
  .right {
    flex:7; 
  }
`
